import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import './23.css'

export default function App() {

    const [isShow, setShow] = useState(false)

    // createPortal 传送内容，可以放在 #root 外部，通常用来显示弹出的广告或模态框用的
    const htmlShow = isShow && createPortal((<>
        <div className='box'>
            <p>
                弹出的内容
                <button onClick={() => { setShow(false) }}>X</button>
            </p>
        </div>
    </>), document.querySelector('body'))

    return (
        <div>
            {htmlShow}

            <button onClick={() => {
                setShow(true)
            }}>点击显示</button>
        </div>
    )
}
